<!DOCTYPE html>
<html >

	<head>
	    <title></title>
	</head>
	
	<body >
	<!-- <div id="frame">
			<div class="slidee">
				<ul>
					<li>0</li>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
				</ul>
			</div>
		</div>	  
	-->
	<div class="wrap">
			<h2>Item based navigation <small>- smart</small></h2>

			<div class="scrollbar">
				<div class="handle" style="-webkit-transform: translateZ(0px) translateY(0px); height: 119px;">
					<div class="mousearea"></div>
				</div>
			</div>

			<div class="frame smart" id="smart" style="overflow: hidden;">
				<ul class="items" style="-webkit-transform: translateZ(0px) translateY(0px); height: 3030px;">
					<li>0</li><li>1</li><li>2</li><li class="active">3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li>
					<li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li>
					<li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li>
					<li>28</li><li>29</li>
				</ul>
			</div>

			<ul class="pages"><li class="active">1</li><li class="">2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>

			<div class="controls center">
				<p>
					<button class="btn prevPage disabled" disabled=""><i class="icon-chevron-left"></i><i class="icon-chevron-left"></i> prevPage</button>
					<button class="btn prev"><i class="icon-chevron-left"></i> prev</button>

					<span class="btn-group">
						<button class="btn add"><i class="icon-plus-sign"></i></button>
						<button class="btn remove"><i class="icon-minus-sign"></i></button>
					</span>

					<button class="btn next">next <i class="icon-chevron-right"></i></button>
					<button class="btn nextPage">nextPage <i class="icon-chevron-right"></i><i class="icon-chevron-right"></i></button>
				</p>

				<p>
					<span class="btn-group">
						<button class="btn toStart">toStart</button>
						<button class="btn toCenter">toCenter</button>
						<button class="btn toEnd">toEnd</button>
					</span>

					<span class="btn-group">
						<button class="btn toStart" data-item="10"><strong>10</strong> toStart</button>
						<button class="btn toCenter" data-item="10"><strong>10</strong> toCenter</button>
						<button class="btn toEnd" data-item="10"><strong>10</strong> toEnd</button>
					</span>
				</p>
			</div>
		</div>
		<!-- Angular -->
		<script src="../third-party/jquery.v1.8.0.js"> </script>
		<!-- UI-Router -->
		
		<!-- App Script -->
		<script src="sly.js"> </script>
		<script src="app.js"> </script>
	</body>
	
</html>